.Card,
.Card__inner {
  height: 100%;
  width: 100%;
}

.Card {
  margin: 0 1% 1.5em;
}

.Card a,
.Card a:hover {
  // TODO: See why we need important here - https://github.com/bitnami/hex/issues/217
  // sass-lint:disable no-important
  text-decoration: none !important;
}

.Card__Icon img {
  max-height: 64px;
}

/* max 4 items per row (default) */
@media screen and (min-width: 480px) {
  .Card.Card-responsive {
    width: 48%;
  }
}

@media screen and (min-width: 768px) {
  .Card.Card-responsive {
    width: 31%;
  }
}

@media screen and (min-width: 1100px) {
  .Card.Card-responsive {
    width: 23%;
  }
}

/* max 3 items per row */
@media screen and (min-width: 768px) {
  .Card.Card-responsive-3 {
    width: 48%;
  }
}

@media screen and (min-width: 1100px) {
  .Card.Card-responsive-3 {
    width: 31%;
  }
}

/* max 2 items per row */
@media screen and (min-width: 768px) {
  .Card.Card-responsive-2 {
    width: 48%;
  }
}
